import chargeStateImg from '@/assets/img/ico_charge_realtime.png';
import stateImg from '@/assets/img/ico_communictaion_realtime.png';
import realtimePowerImg from '@/assets/img/ico_power_realtime.png';
import socImg from '@/assets/img/ico_soc_realtime.png';
import { FC } from 'react';
import { useIntl } from 'umi';
import { useDict } from '../../SelectedDeviceNodeContext';
import Style from './index.less';
interface InfoFieldProps {
  InforData: {
    label?: string;
    value?: API.BoxOverViewDTO[keyof API.BoxOverViewDTO];
    unit?: string;
    imgType?: string;
  };
}

export const InfoField: FC<InfoFieldProps> = ({ InforData }) => {
  const intl = useIntl();
  const { label, value, unit, imgType = 'soc' } = InforData;
  const { chargeDischargeStatusOptions } = useDict();

  const changeImg = (imgType: string): string => {
    let imgStr: string = socImg;
    switch (imgType) {
      case 'soc':
        imgStr = socImg;
        break;
      case 'charge':
        imgStr = chargeStateImg;
        break;
      case 'state':
        imgStr = stateImg;
        break;
      case 'reltimepower':
        imgStr = realtimePowerImg;
        break;
    }
    return imgStr;
  };

  const changeValue = (value: API.BoxOverViewDTO[keyof API.BoxOverViewDTO], imgType: string) => {
    if (imgType === 'charge') {
      let arr = chargeDischargeStatusOptions.filter((res) => String(res?.value) === String(value));

      console.log('相应的字典', chargeDischargeStatusOptions);

      return arr[0]?.label || '';
    } else if (imgType === 'state') {
      let str = '';
      if (value === 1) {
        str = `${intl.formatMessage({ id: 'bigdata.online' })}`;
      } else if (value === 0) {
        str = `${intl.formatMessage({ id: 'bigdata.offline' })}`;
      }
      return str;
    } else {
      return value;
    }
  };

  return (
    <>
      <div className={Style['state-item']}>
        <div className={Style['state-item-left']}>
          {changeImg ? <img src={changeImg(imgType)} /> : null}
        </div>
        <div className={Style['state-item-right']}>
          <p className={Style['state-item-right-toptitle']}>{label}</p>
          <p className={Style['state-item-right-centertitle']}>
            {changeValue(value, imgType)}
            {unit}
          </p>
        </div>
      </div>
    </>
  );
};
